<template>
  <view class="home">
    <!-- banner图 -->
    <view class="banner"> </view>
    <!-- 更多玩法介绍 -->
    <view class="more_play">
      <view class="play_item"></view>
      <view class="play_item"></view>
      <view class="more_btn" @click="seeMore">
        <view class="writ_mode">查看更多</view>
        <img
          src="https://file.zhongzhiyou.cn/43/IMAGE/20211206/9251347e66216f5d7a57a2cc420b9947.png"
          alt=""
        />
      </view>
    </view>
    <!-- tab切换--玩转安吉 -->
    <view class="play_anji">
      <Title :title="title1" />
      <Tabs :height="height1" :list1="list1" :title="title1" :tabs="tabs1" />
    </view>
    <view class="flavour">
      <!-- tab切换--地道风味 -->
      <Title :title="title2" />
      <Tabs :height="height2" :list1="list2" :title="title2" :tabs="tabs2" />
    </view>
    <!--安吉之旅-->
    <view class="anji_tra">
      <view class="tip" @click="request">安吉之旅</view>
      <view class="tip_title">
        <view class="tip_tab">门票预约</view>
        <view class="more_btn">更多 ></view>
      </view>
      <view class="scenic_list">
        <view class="list_item">
          <img
            src="https://file.zhongzhiyou.cn/43/IMAGE/20211207/e47dfed519fd66993ec93ff5de681d84.jpg"
            alt=""
          />
        </view>
        <view class="list_item">
          <img
            src="https://file.zhongzhiyou.cn/43/IMAGE/20211207/e47dfed519fd66993ec93ff5de681d84.jpg"
            alt=""
          />
        </view>
        <view class="list_item">
          <img
            src="https://file.zhongzhiyou.cn/43/IMAGE/20211207/e47dfed519fd66993ec93ff5de681d84.jpg"
            alt=""
          />
        </view>
        <view class="list_item">
          <img
            src="https://file.zhongzhiyou.cn/43/IMAGE/20211207/e47dfed519fd66993ec93ff5de681d84.jpg"
            alt=""
          />
        </view>
      </view>
      <view class="tip_title">
        <view class="tip_tab">酒店预约</view>
        <view class="more_btn">更多 ></view>
      </view>
      <view class="hotel">
        <view class="hot_item">
          <img
            src="https://file.zhongzhiyou.cn/43/IMAGE/20211207/371c03abeee68f36be4369e5b7fbc920.jpg"
            alt=""
          />
        </view>
        <view class="hot_item">
          <img
            src="https://file.zhongzhiyou.cn/43/IMAGE/20211207/371c03abeee68f36be4369e5b7fbc920.jpg"
            alt=""
          />
        </view>
        <view class="hot_item">
          <img
            src="https://file.zhongzhiyou.cn/43/IMAGE/20211207/371c03abeee68f36be4369e5b7fbc920.jpg"
            alt=""
          />
        </view>
        <view class="hot_item">
          <img
            src="https://file.zhongzhiyou.cn/43/IMAGE/20211207/371c03abeee68f36be4369e5b7fbc920.jpg"
            alt=""
          />
        </view>
      </view>
      <view class="tip_title">
        <view class="tip_tab">民宿预订</view>
        <view class="more_btn">更多 ></view>
      </view>
      <view class="guest">
        <view class="guest_item">
          <img
            src="https://file.zhongzhiyou.cn/43/IMAGE/20211207/1cb7ec2f843c0be683c1748a292dfd1d.jpg"
            alt=""
          />
        </view>
        <view class="guest_item">
          <img
            src="https://file.zhongzhiyou.cn/43/IMAGE/20211207/1cb7ec2f843c0be683c1748a292dfd1d.jpg"
            alt=""
          />
        </view>
        <view class="guest_item">
          <img
            src="https://file.zhongzhiyou.cn/43/IMAGE/20211207/1cb7ec2f843c0be683c1748a292dfd1d.jpg"
            alt=""
          />
        </view>
        <view class="guest_item">
          <img
            src="https://file.zhongzhiyou.cn/43/IMAGE/20211207/1cb7ec2f843c0be683c1748a292dfd1d.jpg"
            alt=""
          />
        </view>
      </view>
    </view>
    <!-- tab切换--达人专区 -->
    <view class="expert_peo">
      <Title :title="title3" />
      <Tabs :height="height3" :list1="list3" :title="title3" :tabs="tabs3" />
    </view>
  </view>
</template>

<script>
import Title from "../../components/title/title.vue";
import Tabs from "../../components/tabs/tabs.vue";
import request from "../../untils/ajax.js";
export default {
  components: {
    Title,
    Tabs,
  },
  data() {
    return {
      title1: "玩转安吉",
      title2: "地道风味",
      title3: "达人专区",
      height1: "660rpx",
      height2: "480rpx",
      height3: "1300rpx",
      //玩转安吉item
      tabs1: [
        {
          id: 1,
          child: [
            {
              id: 1,
              name: "西湖景区",
              intro:
                "介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介  介绍介绍介绍介绍介",
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/39462de4d5fe2e2fc7121ec19ae09726.jpg",
              show: 2,
            },
            {
              id: 2,
              name: "湘湖景区",
              intro:
                "介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介  介绍介绍介绍介绍介",
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/5355e70976523e787065062a8c365255.jpg",
              show: 2,
            },
            {
              id: 3,
              name: "其他景区",
              intro:
                "介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介  介绍介绍介绍介绍介",
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/6a540220c356b025058ae54dd2eeb20c.jpg",
              show: 2,
            },
          ],
        },
        {
          id: 2,
          child: [
            {
              id: 1,
              name: "浙江景区",
              intro:
                "介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介  介绍介绍介绍介绍介",
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/39462de4d5fe2e2fc7121ec19ae09726.jpg",
              show: 2,
            },
            {
              id: 2,
              name: "杭州景区",
              intro:
                "介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介  介绍介绍介绍介绍介",
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/5355e70976523e787065062a8c365255.jpg",
              show: 2,
            },
            {
              id: 3,
              name: "牛逼景区",
              intro:
                "介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介  介绍介绍介绍介绍介",
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/6a540220c356b025058ae54dd2eeb20c.jpg",
              show: 2,
            },
          ],
        },
        {
          id: 3,
          child: [
            {
              id: 1,
              name: "开封景区",
              intro:
                "介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介  介绍介绍介绍介绍介",
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/39462de4d5fe2e2fc7121ec19ae09726.jpg",
              show: 2,
            },
            {
              id: 2,
              name: "苏州景区",
              intro:
                "介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介  介绍介绍介绍介绍介",
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/5355e70976523e787065062a8c365255.jpg",
              show: 2,
            },
            {
              id: 3,
              name: "深圳景区",
              intro:
                "介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介  介绍介绍介绍介绍介",
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/6a540220c356b025058ae54dd2eeb20c.jpg",
              show: 2,
            },
          ],
        },
        {
          id: 4,
          child: [
            {
              id: 1,
              name: "西溪景区",
              intro:
                "介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介  介绍介绍介绍介绍介",
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/39462de4d5fe2e2fc7121ec19ae09726.jpg",
              show: 2,
            },
            {
              id: 2,
              name: "虎丘景区",
              intro:
                "介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介  介绍介绍介绍介绍介",
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/5355e70976523e787065062a8c365255.jpg",
              show: 2,
            },
            {
              id: 3,
              name: "牛逼景区",
              intro:
                "介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介绍介  介绍介绍介绍介绍介",
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/6a540220c356b025058ae54dd2eeb20c.jpg",
              show: 2,
            },
          ],
        },
      ],
      //玩转安吉list目录
      list1: [
        { id: 1, name: "本地人都爱去" },
        { id: 2, name: "网红打卡" },
        { id: 3, name: "轻松带娃" },
        { id: 4, name: "古村古韵" },
      ],
      // 地道风味item
      tabs2: [
        {
          id: 1,
          child: [
            {
              id: 1,
              name: "石榴籽呀",
              intro: "介绍介绍介绍介绍介绍介绍介绍介...  介绍介绍介绍介绍介",
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/1c9446539a503fb95a5248025903fba0.jpg",
            },
            {
              id: 2,
              name: "小樱桃呀",
              intro: "介绍介绍介绍介绍介绍介绍介绍介...  介绍介绍介绍介绍介",
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/18e44d6a769273b1613f207ec1836611.jpg",
            },
            {
              id: 3,
              name: "石榴籽呀",
              intro: "介绍介绍介绍介绍介绍介绍介绍介...  介绍介绍介绍介绍介",
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/1c9446539a503fb95a5248025903fba0.jpg",
            },
          ],
        },
        {
          id: 2,
          child: [
            {
              id: 1,
              name: "红色美食",
              intro: "介绍介绍介绍介绍介绍介绍介绍介...  介绍介绍介绍介绍介",
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/1c9446539a503fb95a5248025903fba0.jpg",
            },
            {
              id: 2,
              name: "绿色美食",
              intro: "介绍介绍介绍介绍介绍介绍介绍介...  介绍介绍介绍介绍介",
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/18e44d6a769273b1613f207ec1836611.jpg",
            },
            {
              id: 3,
              name: "黑色美食",
              intro: "介绍介绍介绍介绍介绍介绍介绍介...  介绍介绍介绍介绍介",
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/1c9446539a503fb95a5248025903fba0.jpg",
            },
          ],
        },
      ],
      //地道风味目录
      list2: [
        { id: 1, name: "特色美食" },
        { id: 2, name: "家常饭菜" },
      ],
      //达人专区item
      tabs3: [
        {
          id: 1,
          child: [
            {
              id: 1,
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/96106a46ecc752a55804aaeb2ab9935c.jpg",
              title: "标题1",
              name: "李四",
            },
            {
              id: 2,
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/96106a46ecc752a55804aaeb2ab9935c.jpg",
              title: "标题2",
              name: "张三",
            },
            {
              id: 3,
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/96106a46ecc752a55804aaeb2ab9935c.jpg",
              title: "标题3",
              name: "王五",
            },
            {
              id: 4,
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/96106a46ecc752a55804aaeb2ab9935c.jpg",
              title: "标题4",
              name: "刘二",
            },
          ],
        },
        {
          id: 2,
          child: [
            {
              id: 1,
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/96106a46ecc752a55804aaeb2ab9935c.jpg",
              title: "标题8",
              name: "李四",
            },
            {
              id: 2,
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/96106a46ecc752a55804aaeb2ab9935c.jpg",
              title: "标题9",
              name: "张三",
            },
            {
              id: 3,
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/96106a46ecc752a55804aaeb2ab9935c.jpg",
              title: "标题10",
              name: "王五",
            },
            {
              id: 4,
              src: "https://file.zhongzhiyou.cn/43/IMAGE/20211207/96106a46ecc752a55804aaeb2ab9935c.jpg",
              title: "标题11",
              name: "刘二",
            },
          ],
        },
      ],
      //达人专区目录
      list3: [
        { id: 1, name: "达人分享" },
        { id: 2, name: "达人征集" },
      ],
    };
  },
  onLoad() {},
  methods: {
    request() {
      let params = {};
      let API_URL = "api/app/poi/getOnePoiBaseData";
      request.GET({
        params: params,
        API_URL: API_URL,
        success: (res) => {
          console.log(res);
        },
      });
    },
    // 点击查看更多
    seeMore() {
      this.$u.route("pages/anjiCard/index", { id: 3 });
    },
  },
};
</script>

<style lang="scss">
@import "./index.css";
.anji_tra {
  margin-left: 24rpx;
  width: calc(100% - 48rpx);
  background-color: #a3c8d7;
  .tip {
    font-size: 36rpx;
    font-weight: 500;
    color: #1b70ac;
    margin-top: 20rpx;
    margin-bottom: 25rpx;
  }
  .tip_title {
    margin-bottom: 25rpx;
    display: flex;
    justify-content: space-between;
    .tip_tab {
      width: 140rpx;
      text-align: center;
      line-height: 40rpx;
      color: #fefefe;
      font-size: 24rpx;
      height: 40rpx;
      background: #7ab3af;
      border-radius: 20rpx;
    }
    .more_btn {
      font-size: 24rpx;
      font-weight: 400;
      color: #2a8982;
    }
  }
  .scenic_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .list_item {
      width: 340rpx;
      height: 340rpx;
      border-radius: 16rpx;
      margin-bottom: 25rpx;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .hotel {
    display: flex;
    justify-content: space-between;
    .hot_item {
      margin: 24rpx 0;
      width: 160rpx;
      height: 120rpx;
      img {
        border-radius: 16rpx;
        width: 100%;
        height: 100%;
      }
    }
  }
  .guest {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .guest_item {
      width: 340rpx;
      height: 200rpx;
      margin-bottom: 25rpx;
      img {
        border-radius: 16rpx;
        width: 100%;
        height: 100%;
      }
    }
  }
}
.expert_peo {
  background-color: #a3c8d7;
}
</style>
